<template>
  <div>
    <!-- 上拉框容器 -->
    <div class="drop_up_container" v-if="!show">
      <!-- 控制上拉按钮 -->
      <div class="drop_up_btn" @click="toggleDropUp">
        <i class="iconfont icon-xiala"></i>
      </div>
      <!-- 不变的部分 -->
      <div class="drop_up_static_elements">
        <span class="want_sale_text inline-block">我要卖</span>
        <span class="waste_items_outline inline-block van-ellipsis"
              v-if="true">{{ list | getWasteOutlineString }}</span>
        <button class="waste_items_sale_btn"
                :class="list.length < 1 ? 'disable' : ''"
                :disabled="list.length < 1"
                @click="goToSale">
          去卖废品
        </button>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" transition="fade">
      <div class="drop_up_container" v-if="show">
        <!-- 控制关闭按钮 -->
        <div class="drop_up_btn" @click="toggleDropUp">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <!-- 不变的部分 -->
        <div class="drop_up_static_elements">
          <span class="want_sale_text inline-block">我要卖</span>
          <span class="waste_items_outline inline-block van-ellipsis"
                v-if="true">{{ list | getWasteOutlineString }}</span>
          <button class="waste_items_empty_btn pull-right"
                  :class="list.length < 1 ? 'disable' : ''"
                  :disabled="list.length < 1"
                  @click="emptyWasteForSaleList">
            <i class="iconfont icon-lajitong">清空</i>
          </button>
        </div>
        <!-- 会动态增加的列表 -->
        <div class="drop_up_dynamic_elements" v-show="show">
          <div class="drop_up_dynamic_elements_scroll">
            <div class="drop_up_waste_item" v-for="item in list" :key="item.id">
              <div class="drop_up_waste_name van-ellipsis">{{ item.name }}</div>
              <PriceRange :min="item.min" :max="item.max" :showPriceText="true"></PriceRange>
              <div class="drop_up_waste_minus">
                <i class="iconfont icon-jian" @click="delWasteFromSaleList(item)"/>
              </div>
            </div>
          </div>
          <div class="drop_up_sale_btn">
            <button class="go_to_sale"
                    :class="list.length < 1 ? 'disable' : ''"
                    :disabled="list.length < 1"
                    @click="goToSale">
              去卖废品
            </button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/babel">
  import PriceRange from '../../component/price/PriceRange';

  export default {
    name: 'DropUp',
    components: { PriceRange },
    props: {
      list: Array
    },
    data() {
      return {
        show: false
      };
    },
    methods: {
      toggleDropUp() {
        if (this.list.length > 0) {
          this.show = !this.show;
        } else {
          this.show = false;
        }
      },
      delWasteFromSaleList(waste) {
        this.$store.dispatch('delWasteFromSaleList', waste);
      },
      emptyWasteForSaleList() {
        this.$store.dispatch('emptyWasteForSaleList');
        this.show = false;
      },
      goToSale() {
        this.$router.push('/product');
      }
    }
  };
</script>

<style scoped lang="less">

  .drop_up_container {
    z-index: 2;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    .drop_up_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 2;
      width: 100px;
      height: 50px;
      margin: 0 auto -1px;
      border: 1px solid #d2d2d2;
      border-bottom-color: transparent;
      border-radius: 50px 50px 0 0;
      background-color: #fff;
      .icon-xiala,
      .icon-guanbi {
        color: #999;
      }
    }
    .drop_up_static_elements {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;
      padding: 20px 30px;
      border-top: 1px solid #d2d2d2;
      background-color: #fff;
      .want_sale_text {
        font-size: 32px;
      }
      .waste_items_outline {
        width: 200px;
        margin-left: 20px;
        margin-right: auto;
        font-size: 28px;
      }
      .waste_items_sale_btn {
        justify-self: flex-end;
        width: 320px;
        height: 80px;
        line-height: 80px;
        outline: none;
        border: none;
        border-radius: 40px;
        background-color: #f7a427;
        color: #fff;
        font-size: 32px;
        &.disable {
          background-color: #fbcb82;
        }
      }
      .waste_items_empty_btn {
        outline: none;
        border: none;
        background-color: transparent;
        color: #999;
        .icon-lajitong {
          font-size: 26px;
        }
      }
    }
  }
  .van-popup {
    width: 100%;
    background-color: transparent;
    .drop_up_dynamic_elements {
      border-top: 1px solid #d2d2d2;
      background-color: #fff;
      .drop_up_dynamic_elements_scroll {
        overflow-y: scroll;
        max-height: 50vh;
        padding: 0 30px;
        .drop_up_waste_item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 80px;
          padding: 25px 0;
          border-bottom: 1px solid #d2d2d2;
          .drop_up_waste_name {
            width: 120px;
            color: #333;
            font-size: 26px;
          }
          .drop_up_waste_price_text {
            margin-right: 10px;
            color: #5c5c5c;
            font-size: 24px;
          }
          .drop_up_waste_minus {
            display: flex;
            justify-content: center;
            align-items: center;
            .icon-jian {
              color: #4694ff;
              font-size: 45px;
            }
          }
        }
      }
      .drop_up_sale_btn {
        padding: 30px;
        .go_to_sale {
          outline: none;
          border: none;
          width: 100%;
          height: 90px;
          line-height: 90px;
          border-radius: 45px;
          background-color: #ff7a01;
          color: #fff;
          font-size: 36px;
          &.disable {
            background-color: #fbcb82;
          }
        }
      }
    }
  }
</style>